<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
//--------------------------------------
import { useStore } from "@/storage/cache";
//--------------------------------------
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
// import required modules
import { Pagination, Navigation } from "swiper/modules";
//--------------------------------------------------------------------------------------
const store = useStore();
//--------------------------------------------------------------------------------------
// 设备类型部分
const innerWidthValue = ref(window.innerWidth);
const deviceType = ref("");
//--------------------------------------------------------------------------------------
// 当前窗口的大小
const currentWindowWidth = ref(document.body.offsetWidth);
const currentWindowHeight = ref(document.body.offsetHeight);
// 监听变化，当发生变化时，这个值也会有变化
const computeWidth = computed(() => store.rootWidth);
const computeHeight = computed(() => store.rootHeight);
//--------------------------------------------------------------------------------------
// 业务相关的属性
const eachBannerWidth = ref(0); // 单个Banner的宽度
const eachBannerWidthStr = ref(""); // 单个Banner的宽度值（字符串）
const eachBannerHeightStr = ref(""); // 单个Banner的高度值（字符串）
//
const oneLineBannerNum = ref(1);
const imageDivSpace = 16; // 多个图片时，图片间隔，左右间隔
//--------------------------------------------------------------------------------------
function revalue() {
  //----------------------------------------------------------------------------
  // 【推测，设备类型】
  // 通过实际的innerWidth来判断当前窗口宽度，推测当前的设备类型
  const value = window.innerWidth;
  innerWidthValue.value = value;
  if (value > 1280) {
    // 认为是PC
    deviceType.value = "desktop";
  } else if (value >= 1024 && value <= 1280) {
    // 认为是折叠屏
    deviceType.value = "foldable";
  } else if (value >= 768 && value <= 1024) {
    // 认为是pad
    deviceType.value = "tablet";
  } else {
    // 认为是 手机
    deviceType.value = "phone";
  }
  //----------------------------------------------------------------------------
  // 【获取窗口大小，并调整窗口大小】
  // 实时计算，当前窗口的大小，同时限制
  currentWindowWidth.value = document.body.offsetWidth;
  currentWindowHeight.value = document.body.offsetHeight;
  if (currentWindowWidth.value < 600) {
    // 限制最小窗口宽度为720px
    currentWindowWidth.value = 600;
  }
  if (currentWindowHeight.value < 840) {
    // 限制最小窗口宽度为900px
    currentWindowHeight.value = 840;
  }
  // 【调整窗口的最大大小】
  // 方法用于把窗口大小调整为指定的宽度和高度。
  // window.resizeTo(currentWindowWidth.value, currentWindowHeight.value);
  // 缓存当前窗口宽度，高度（有限制最小宽度，最小高度）
  store.rootWidth = currentWindowWidth.value;
  store.rootHeight = currentWindowHeight.value;
  console.log(
    "<-宽高->" +
      currentWindowWidth.value +
      "<-->" +
      currentWindowHeight.value +
      "<-->"
  );
  // console.log(
  //   "<-宽高(computed)->" +
  //     computeWidth.value +
  //     "<-->" +
  //     computeHeight.value +
  //     "<-->"
  // );
  //----------------------------------------------------------------------------
  // 【业务计算】
  // 业务计算，当前窗口宽度，应该显示多少个Banner
  if (currentWindowWidth.value > 1280) {
    // 认为是PC
    oneLineBannerNum.value = 3;
  } else if (
    currentWindowWidth.value >= 1024 &&
    currentWindowWidth.value <= 1280
  ) {
    // 认为是折叠屏
    oneLineBannerNum.value = 2;
  } else if (
    currentWindowWidth.value >= 768 &&
    currentWindowWidth.value <= 1024
  ) {
    // 认为是pad
    oneLineBannerNum.value = 2;
  } else {
    // 认为是 手机
    oneLineBannerNum.value = 1;
  }
  //--------------------------------------

  // 计算单个图片的宽度
  if (oneLineBannerNum.value == 1) {
    eachBannerWidth.value =
      (currentWindowWidth.value - imageDivSpace * 2 - imageDivSpace * 0) / 1;
  } else if (oneLineBannerNum.value == 2) {
    eachBannerWidth.value =
      (currentWindowWidth.value - imageDivSpace * 2 - imageDivSpace * 1) / 2;
  } else {
    eachBannerWidth.value =
      (currentWindowWidth.value - imageDivSpace * 2 - imageDivSpace * 2) / 3;
  }
  eachBannerWidthStr.value = eachBannerWidth.value + "px";
  const heightValue = (eachBannerWidth.value / 700) * 300;
  eachBannerHeightStr.value = heightValue + "px";

  //--------------------------------------
  //限制窗口的最小宽高
  if (window.innerWidth < 600) {
    if (window.innerHeight < 840) {
      window.resizeTo(600, 840);
    } else {
      window.resizeTo(600, window.innerHeight);
    }
  } else {
    if (window.innerHeight < 840) {
      window.resizeTo(window.innerWidth, 840);
    }
  }
}
//--------------------------------------------------------------------------------------
onMounted(() => {
  revalue(); // onMounted
  window.addEventListener("resize", resizeListener);
  // 这里模拟，获取数据后，重新排序
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeListener);
});
onUpdated(() => {
  revalue(); // onUpdated
  // console.log("宽度[onUpdated]----" + deviceType.value);
});
function resizeListener() {
  revalue(); // resize callback
  //--------------------------------------
  // console.log("宽度[resizeListener]----" + deviceType.value);
}

//----------------------------------------------------------------------
const imgList = [
  "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
  "http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
  "http://gips2.baidu.com/it/u=828570294,3060139577&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
  "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
  "http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
  "http://gips2.baidu.com/it/u=828570294,3060139577&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
  "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
  "http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
  "http://gips2.baidu.com/it/u=828570294,3060139577&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
];
//----------------------------------------------------------------------
// 如果没有加入对应的组件，则即便显示了组件，可能也不会响应
const modules = ref([Pagination, Navigation]);
// 使用示例  https://swiperjs.com/demos
const pagination = ref({
  clickable: true,
  renderBullet: function (index: number, className: string) {
    return '<span class="' + className + '">' + "</span>"; // 带数字的
    // console.log("<-renderBullet->" + index + "<-->" + className + "<-->");
    // return '<span class="swiper-pagination-bullet"></span>';
  },
});
//----------------------------------------------------------------------
const iconSize = ref("24px");
//----------------------------------------------------------------------
</script>
<template>
  <!-- ************************************************************** -->
  <!-- 使用循环显示对应的数据，避免造成显示的异常问题 -->
  <div class="swiper-root">
    <span :style="{ color: '#ffffff' }"
      >{{ currentWindowWidth }} -- {{ currentWindowHeight }}</span
    >
    <swiper
      :slidesPerView="oneLineBannerNum"
      :spaceBetween="16"
      :loop="true"
      :pagination="pagination"
      :navigation="true"
      :modules="modules"
      :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
      }"
      class="mySwiper"
      :style="{ height: eachBannerHeightStr }"
    >
      <swiper-slide v-for="(item, index) in imgList" :key="index + '_' + item"
        ><img :src="item" style="object-fit: cover; border-radius: 16px"
      /></swiper-slide>
      <!-- 自定义导航按钮 -->
      <!-- <div class="swiper-button-prev">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="swiper-button-next">
        <el-icon><ArrowRight /></el-icon>
      </div> -->
    </swiper>
  </div>
  <!-- ************************************************************** -->
  <!-- <span class="swiper-pagination-bullet"></span>
  <span class="swiper-pagination-bullet-active"></span> -->
  <!-- ************************************************************** -->
</template>
<style scoped>
/* -------------------------------------------------------- */
/* 自定义导航按钮样式 */
:deep(.swiper-button-prev) {
  background-color: #999999ff; /* 设置背景色 */
  color: #00ff33; /* 设置文字颜色 */
  font-size: 12px;
  padding: 0px; /* 设置内边距 */
  border-radius: 50%; /* 设置圆角 */
  width: 30px; /* 设置宽度 */
  height: 30px; /* 设置高度 */
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

:deep(.swiper-button-next) {
  background-color: #999999ff; /* 设置背景色 */
  color: #007aff; /* 设置文字颜色 */
  font-size: 12px;
  padding: 0px; /* 设置内边距 */
  border-radius: 50%; /* 设置圆角 */
  width: 30px; /* 设置宽度 */
  height: 30px; /* 设置高度 */
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
/* -------------------------------------------------------- */
/* https://swiperjs.com/demos#pagination-custom 
https://www.swiper.com.cn/api/navigation/303.htmlcss 指定样式 */
:deep(.swiper-pagination-bullet) {
  width: 20px;
  height: 4px;
  opacity: 1;
  background: #dddddd;
  border: 1px solid #dddddd;
  border-radius: 0px;
}

:deep(.swiper-pagination-bullet-active) {
  width: 20px;
  height: 4px;
  opacity: 1;
  background: #007aff;
  border: 1px solid #007aff;
  border-radius: 0px;
}
/* -------------------------------------------------------- */
.swiper-root {
  width: 100%;
  height: 100%;
  padding: 16px;
  min-width: 600px;
  min-height: 840px;
  background-color: #3264ff;
}

/* https://www.swiper.com.cn/api/navigation/355.html */
:deep(.swiper) {
  width: 100%;
  height: 100%;
  --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 24px; /* 设置按钮大小 */
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #444;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
}
</style>
